<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="index.css">
    <!-- <style>
        #loginApp{
            background-color: #68D5FB;
        }
    </style> -->
</head>

<body>
    <div id="loginApp">
        <el-container style="height: 100vh; align-items: center; justify-content: center;">
            <el-card style="width: 400px;">
                <div slot="header" class="clearfix">
                    <span style="font-size: 18px;">登录</span>
                </div>
                <el-form @submit.native.prevent="handleLogin">
                    <el-form-item label="证书文件">
                        <el-upload action="#" :auto-upload="false" :on-change="handleCertUpload" accept=".cer,.pem">
                            <el-button size="small">点击上传证书</el-button>
                            <div slot="tip" class="el-upload__tip">请上传您的数字证书文件</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" native-type="submit" :loading="loading" style="width: 100%;">登
                            录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-container>
    </div>

    <script src="vue.js"></script>
    <script src="index.js"></script>
    <script>
        new Vue({
            el: '#loginApp',
            data() {
                return {
                    certContent: '',
                    loading: false
                }
            },
            methods: {
                handleCertUpload(file) {
                    const reader = new FileReader()
                    reader.onload = () => {
                        this.certContent = reader.result
                    }
                    reader.readAsText(file.raw)
                },

                async handleLogin() {
                    if (!this.certContent) {
                        this.$message.error('请先上传证书')
                        return
                    }

                    this.loading = true
                    try {
                        const response = await fetch('http://localhost:8000/login', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                            },
                            body: `cert=${encodeURIComponent(this.certContent)}`
                        })

                        if (response.ok) {
                            const data = await response.json();
                            localStorage.setItem('username', data.username);
                            localStorage.setItem('organization', data.organization); // 新增
                            window.location.href = 'index.html';
                        } else {
                            this.$message.error('登录失败：证书验证未通过')
                        }
                    } catch (error) {
                        this.$message.error('网络请求失败')
                    } finally {
                        this.loading = false
                    }
                }
            }
        })
    </script>
</body>

</html>